<template>
    <div class="register-container">
        <el-form :model="account" :rules="rules" ref="form" label-width="100px" class="register-form">
            <h3 class="register-title">用户注册</h3>
            <el-form-item label="用户名" prop="aname">
                <el-input v-model="account.aname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="apassword">
                <el-input type="password" v-model="account.apassword"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="apasswordchcked">
                <el-input type="password" v-model="account.apasswordchcked"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">确认注册</el-button>
                <el-button type="danger" @click="this.$router.push('/login')">返回登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            account: {
                aname: '',
                apassword: '',
                apasswordchcked: ''
            },
            rules: {
                aname: [{ validator: this.validateUsername, trigger: 'blur' }],
                apassword: [{ validator: this.validatePassword, trigger: 'blur' }],
                apasswordchcked: [{ validator: this.validateConfirmPassword, trigger: 'blur' }]
            }
        };
    },
    methods: {
        validateUsername(rule, value, callback) {
            if (value.length < 6) {
                callback(new Error('用户名必须大于5位'));
            } else {
                callback();
            }
        },

        validatePassword(rule, value, callback) {
            const strongPassword = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
            if (!strongPassword.test(value)) {
                callback(new Error('至少8个字符，且包含字母和数字'));
            } else {
                callback();
            }
        },

        validateConfirmPassword(rule, value, callback) {
            if (value !== this.account.apassword) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('注册成功');
                    axios.post('auth/reg', this.account)
                      .then((res) => {
                            console.log(res);
                        })
                      .catch((err) => {
                            console.log(err);
                        });
                    //this.$router.push('/login');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped>
.register-container {
    background-image: url('../img/R-C.jpg');
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}
</style>